<template>
  <view class="mdline-item-class-component" @click="turnVideo">
    <image  class="item-cover" v-if="classInfo.cover" :src="`https://www.aikoolearn.com/video-dev${classInfo.cover}`" alt="">
		<view class="">
			<p class="title ellipsis2">{{ classInfo.title ||classInfo.videoTitle}}</p>
			<view class="footer"> <image v-if="classInfo.lecturerAvatar" :src="`/video-dev${classInfo.lecturerAvatar}`" alt="">
			  <image v-else src="/static/img/teacheravater.png" alt="">
			  <span>{{
			    classInfo.lecturer }}</span> 
			</view>
		</view>
   
  </view>
</template>
<script>
export default {
  props: {
    classInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {}
  },
  computed: {
    isLogin() {
      return uni.getStorageSync('isLogin')
    },
    userInfo() {
      return JSON.parse(uni.getStorageSync('userInfo'))
    }
  },
  methods: {
  turnVideo() {
      if (this.isLogin) {
        if (this.classInfo.videoId) {
		  uni.navigateTo({
		  	url: '/pages/course/courseDetails?rid='+this.classInfo.videoId
		  });
         
        } else {
         uni.navigateTo({
         	url: '/pages/course/courseDetails?rid='+this.classInfo.rid
         });
        }

      } else {
       uni.showToast({
       	title: '未登录',
       	icon: 'error',
       	duration: 500
       });
	   uni.redirectTo({
	   	url: '/pages/login/index'
	   })
      }
    }
  
  }
}
</script>
<style lang="less" scoped>
.mdline-item-class-component {

  position: relative;
	display: flex;
  // margin:38.168rpx 38.168rpx 38.168rpx 0;
  border-radius: 15.267rpx;
  background-color: #fff;
  cursor: pointer;
  .item-cover {
    width: 126px;
    height: 84px;
    background: no-repeat center/cover;
    margin-bottom:  15.267rpx;
    border-radius:8px  ;
    overflow: hidden;
  }

  .title {
    width: 100%;
    color: #000000;
    line-height: 45.802rpx;
    font-size: 22rpx;
    font-weight: 500;
    font-family: SourceHanSansCN, SourceHanSansCN;
    // margin-top:  15.267rpx;
    padding: 0  15.267rpx;

    &:hover {
      // color: @md-primary-color;
    }
  }

  .ellipsis2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .one,
  .two {
    font-size: 22.901rpx;
    color: #9199a1;
    line-height: 34.351rpx;
    padding: 0 8px;
    margin-bottom: 8px;
    height: 38.168rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .footer {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0px 22.901rpx;
    position: absolute;
    bottom: 22.901rpx;

    image {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      margin: 0;

    }

    >:nth-child(2) {
      color: #000000;
      margin-left: 15.267rpx;
      font-size: 22.901rpx;
      font-family: SourceHanSansCN, SourceHanSansCN;
      font-weight: 400;
      color: #666666;
      line-height: 34.351rpx;
    }

    >:nth-child(3) {
      // width: 187.023rpx;
      // height: 61.069rpx;
      line-height: 61.069rpx;
      font-size: 26.718rpx;
     
      color: #FF6108;
      border-radius: 30.534rpx;
      text-align: center;
      position: absolute;
      right:57.252rpx;
    }
  }
}
</style>